<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../Cesium/Build/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="../../plugin/vide7.4.1/css/video-js.min.css">
    <script src="../../Cesium/Build/Cesium/Cesium.js"></script>
    <script src="../../plugin/vide7.4.1/js/video.min.js"></script>
    <script src="../../JS/cesiumvideo.js"></script>
    <script src="../../Cesium/jquery-3.4.1.min.js"></script>
    <script src="../../Cesium/SmartEarth.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- <video id="video" class="video-js vjs-default-skin" style="display: none;" controls autoplay="autoplay" width="640"
        height="320" data-setup='{}'>
        <source src="http://192.168.146.131:8000/hls/test.m3u8" type="application/x-mpegURL" />
        <source src="../../plugin/vide7.4.1/oceans.mp4"> 
        <source src="">
    </video> -->
    <div id="cesiumContainer">

    </div>
</body>
<script>

    window.sgworld = new SmartEarth.SGWorld("cesiumContainer", Cesium, {
        //需要进行可视化的数据源的集合
        animation: false, //是否显示动画控件
        shouldAnimate: true,
        homeButton: false, //是否显示Home按钮
        fullscreenButton: false, //是否显示全屏按钮
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
        //天地图是官方开元的地图，不需要密钥
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
            url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
        })
    }, null, function () { });
    window.Viewer = sgworld._Viewer;
    var viewer = sgworld._Viewer;


    // var viewer = new Cesium.Viewer('cesiumContainer', {
    //     //需要进行可视化的数据源的集合
    //     animation: false, //是否显示动画控件
    //     shouldAnimate: true,
    //     homeButton: false, //是否显示Home按钮
    //     fullscreenButton: false, //是否显示全屏按钮
    //     baseLayerPicker: false, //是否显示图层选择控件
    //     geocoder: false, //是否显示地名查找控件
    //     timeline: false, //是否显示时间线控件
    //     sceneModePicker: true, //是否显示投影方式控件
    //     navigationHelpButton: false, //是否显示帮助信息控件
    //     infoBox: false, //是否显示点击要素之后显示的信息
    //     requestRenderMode: true, //启用请求渲染模式
    //     scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
    //     sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    //     fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
    //     //天地图是官方开元的地图，不需要密钥
    //     imageryProvider: new Cesium.UrlTemplateImageryProvider({
    //         url: "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
    //     })
    // });

    // // var vid = document.getElementById("video");
    var vid = cesiumvideo.getEl();
    var polygon = viewer.entities.add({
        polygon: {
            hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray([
                116.3905818638, 39.9073400924,
                116.3918829375, 39.9073236682,
                116.3916863213, 39.9065994805,
                116.3907149650, 39.9065800227
            ])),
            material: vid,
            classificationType: Cesium.ClassificationType.BOTH
        }
    });
    viewer.flyTo(polygon);

    function test() {
        sgworld.Command.execute(0, 1, { url: 'http://192.168.146.131:8000/hls/test.m3u8' }, function (polygon) {
            debugger
            // var vid = cesiumvideo.getEl();
            polygon.polygon.polygon.polygon.material = vid
        })
    }
</script>

</html>